{extend name="default/layout" /}

{block name="css"}
<link href="/static/default/css/user/common.css?v={$static_version}" rel="stylesheet">
{/block}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

        <!-- 侧边栏导航 -->
        {assign name="current" value="level" /}
        {include file="default/components/user-sidebar" /}

        <!-- 主要内容区域 -->
        <div class="lg:col-span-3 space-y-4">

            <!-- 当前等级状态卡片 -->
            <div class="bg-white rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-crown text-blue-500 text-lg"></i>
                        </div>
                        <div>
                            <h1 class="text-lg font-semibold text-gray-800">会员等级</h1>
                            <p class="text-sm text-gray-600">当前等级：{$level_data.current_level.name|default='普通会员'} · {$level_data.user.points|default=0} 积分</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                            {$level_data.current_level.name|default='普通会员'}
                        </span>
                    </div>
                </div>
            </div>

            <!-- 等级信息和升级进度 - 左右布局 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <!-- 左侧：等级列表 -->
                <div class="bg-white rounded-lg p-4">
                    <h2 class="text-lg font-semibold text-gray-800 mb-3">等级列表</h2>
                    <div class="space-y-2">
                        {volist name="level_data.all_levels" id="level"}
                        <div class="border rounded-lg p-3 border-gray-200 {if $level.id == $level_data.current_level.id}border-blue-500 bg-blue-50{/if}">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h3 class="font-semibold text-gray-800">{$level.name}</h3>
                                    <p class="text-sm text-gray-600">{$level.min_points} - {$level.max_points} 积分</p>
                                </div>
                                {if $level.id == $level_data.current_level.id}
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    当前等级
                                </span>
                                {/if}
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>

                <!-- 右侧：升级进度和积分获取方式 -->
                <div class="bg-white rounded-lg p-4">
                    <h2 class="text-lg font-semibold text-gray-800 mb-3">升级进度</h2>

                    <div class="mb-4">
                        {if $level_data.next_level}
                        <div class="flex justify-between text-sm mb-2">
                            <span class="text-gray-500">距离 {$level_data.next_level.name}</span>
                            <span class="text-blue-500">还需 {$level_data.need_points} 积分</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-500 h-2 rounded-full" style="width: {$level_data.progress_percentage}%"></div>
                        </div>
                        {else}
                        <div class="text-center text-sm text-gray-500">
                            <i class="fas fa-crown text-2xl mb-2"></i>
                            <p>您已达到最高等级！</p>
                        </div>
                        {/if}
                    </div>

                    <h3 class="font-medium text-gray-800 mb-2">积分获取方式</h3>
                    <div class="space-y-1 text-sm text-gray-600">
                        <div class="flex items-center">
                            <i class="fas fa-shopping-cart text-green-500 mr-2 text-xs"></i>
                            每次购买可获得相应积分
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-calendar-check text-blue-500 mr-2 text-xs"></i>
                            每日签到可获得积分
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-user-plus text-purple-500 mr-2 text-xs"></i>
                            邀请好友注册可获得50积分
                        </div>
                        <div class="mt-3">
                            <a href="/user/sign" class="inline-block px-3 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600 transition-colors">
                                去签到获取积分
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 积分记录 -->
            <!-- <div class="bg-white rounded-sm p-6 ">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">积分记录</h2>

                <div class="space-y-3">
                    <div class="text-center py-8 text-gray-500">
                        <i class="fas fa-coins text-4xl mb-3"></i>
                        <p>暂无积分记录</p>
                        <a href="/user/sign"
                            class="inline-block mt-2 px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors">
                            去签到获取积分
                        </a>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</div>
{/block}

{block name="css"}
<link href="/static/default/css/user/common.css?v={$static_version}" rel="stylesheet">
{/block}

{block name="js"}
<script>
    $(document).ready(function () {
        // 添加动画效果
        const $levelCards = $('.grid .border');

        $levelCards.each(function (index) {
            const $card = $(this);
            $card.css({
                'opacity': '0',
                'transform': 'translateY(20px)',
                'transition': 'all 0.3s ease'
            });

            setTimeout(() => {
                $card.css({
                    'opacity': '1',
                    'transform': 'translateY(0)'
                });
            }, index * 100 + 100);
        });
    });
</script>
{/block}